<template>
    <div class="timeWrapper">
        <h1>比赛倒计时</h1>
        <main>
            <div class="TimeAppear">{{ timer.timeStr }}</div>
            <div>
                <input v-model="timer.h" @blur="astrict" type="number" max="24" min="0" placeholder="时"/>
                <input v-model="timer.m" @blur="astrict" type="number" max="60" min="0" placeholder="分"/>
                <input v-model="timer.s" @blur="astrict" type="number" max="60" min="0" placeholder="秒"/>
                <div class="buttonWrapper">
                    <button @click="startFun">{{ timer.text }}</button>
                    <button @click="resetTimer">重置</button>
                </div>
            </div>
        </main>
    </div>
</template>

<script setup>
import {reactive} from "vue";
import dayjs from "dayjs";
import {postTest} from "../api/ajax";
import bus from "vue3-eventbus";
let timer = reactive({
    h: 0,
    m: 0,
    s: 0,
    timeStr: "00:00:00",
    flag: false,
    text: "开始"
})
let timer0 = null;
let ms = 0;
//事件总线
bus.on('foo', e => {
    ms = e
    timer.timeStr = dayjs(ms).add(-8, "hour").format("HH:mm:ss");
})

function startFun() {
    ms = ms === 0 ? (timer.h * 60 * 60 + timer.m * 60 + timer.s) * 1000 : ms;
    if (timer0 === null) {
        reStartTimer();
    } else {
        clearInterval(timer0);
        timer0 = null;
        timer.text = "继续";
    }
}

function reStartTimer() {
    clearInterval(timer0);
    timer.timeStr = dayjs(ms).add(-8, "hour").format("HH:mm:ss");
    timer0 = setInterval(() => {
        ms -= 1000;
        timer.timeStr = dayjs(ms).add(-8, "hour").format("HH:mm:ss");
        if (ms <= 0) {
            resetTimer();
            console.log("时间到");
        }
    }, 1000);
    timer.text = "暂停";
}

function resetTimer() {
    timer.timeStr = "00:00:00";
    timer.text = "开始";
    timer.h = 0;
    timer.m = 0;
    timer.s = 0;
    ms = 0;
    timer.flag = false;
    clearInterval(timer0);
    timer0 = null;
}

function astrict() {
    timer.h = timer.h % 24;
    timer.m = timer.m % 60;
    timer.s = timer.s % 60;
}
</script>

<style scoped lang="scss">
.timeWrapper {
    h1 {
        color: #ffffff;
        font-size: 28px;
        font-weight: bold;
        font-style: italic
    }
    main {
        color: #ffffff;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        flex-direction: column;
        border-left: 1px solid rgba(187, 187, 187, 1);
        border-right: 1px solid rgba(187, 187, 187, 1);
        width: 365px;
        height: 218px;
        background-color: rgba(8, 26, 61, 1);
        .TimeAppear {
            color: #ffffff;
            font-size: 48px;
            font-style: italic;
        }
        div {
            input {
                width: 100px;
                height: 46px;
                border-radius: 5px;
                margin-left: 10px;
            }
            .buttonWrapper {
                text-align: center;
                margin-top: 10px;
                button {
                    margin-left: 10px;
                    width: 69px;
                    height: 46px;
                    border-radius: 5px;
                    font-weight: bolder;
                    background-color: red;
                    border: none;
                    color: white;
                }
                button:nth-child(2){
                    background-color: #12408d;
                }
            }
        }
    }
}
</style>
